﻿@page
@model FytSoa.Web.Pages.FytAdmin.Shop.CouponModifyModel
@{
    ViewData["Title"] = "优惠券设置";
    Layout = "~/Pages/FytAdmin/_Layout.cshtml";
}
<style>
        .input-group {
            display:table;
        }
        .input-group span{
            display: table-cell;
            border:1px solid #e6e6e6;
            padding:0 15px;
        }
            .input-group span.center {
                border-left:0px;
                border-right:0px;
            }
            .input-group span:first-child {
                border-right: 0px;
            }
            .input-group span:last-child {
                border-left:0px;
            }
            .input-group .layui-input {
                display: table-cell;
            }
    </style>
<form class="layui-form form-cus" action="" id="app">

    <div class="layui-form-item">
        <label class="layui-form-label">名称</label>
        <div class="layui-input-block">
            <input type="text" name="couponName" v-model="m.couponName" maxlength="50" lay-verify="required" lay-verType="tips" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">类型</label>
        <div class="layui-input-block">
            <select name="couponTypes" id="couponTypes">
                <option value="1">优惠券</option>
                <option value="2">运费券</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">使用级别</label>
        <div class="layui-input-block">
            <select name="memberTypes" id="memberTypes">
                <option value="1">所有级别</option>
                <option :value="it.guid" v-for="it in group">{{it.name}}</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">时间范围：</label>
        <div class="layui-input-block">
            <input type="text" name="uptime" id="uptime" value="" placeholder="" maxlength="100" autocomplete="off" class="layui-input">
            <div class="input-tip">为空位则不限制时间</div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">优惠方式</label>
        <div class="layui-input-block">
            <input type="radio" name="yhtypes" value="1" title="立减" lay-filter="yhtypes" :checked="m.mode==1?true:false">
            <input type="radio" name="yhtypes" value="2" title="打折" lay-filter="yhtypes" :checked="m.mode==2?true:false">
            <input type="radio" name="yhtypes" value="3" title="返利" lay-filter="yhtypes" :checked="m.mode==3?true:false">
        </div>
    </div>
    <div class="layui-form-item" v-show="m.mode==1">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <div class="input-group">
                <span class="col-span">立减</span><input type="number" v-if="m.modeJson" v-model="m.modeJson.deduction" placeholder="" autocomplete="off" class="layui-input"><span class="col-span">元</span>
            </div>
        </div>
    </div>
    <div class="layui-form-item" v-show="m.mode==2">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <div class="input-group">
                <span class="col-span">打</span><input type="number" v-if="m.modeJson" v-model="m.modeJson.discount" placeholder="0.1~10" autocomplete="off" class="layui-input"><span class="col-span">折</span>
            </div>
        </div>
    </div>
    <div class="layui-form-item" v-show="m.mode==3">
        <label class="layui-form-label"></label>
        <div class="layui-input-block">
            <div class="input-group">
                <span class="col-span">返</span><input type="number" v-if="m.modeJson" v-model="m.modeJson.backmoney" class="layui-input"><span class="col-span center">余额　返</span>
                <input type="number" v-if="m.modeJson" v-model="m.modeJson.backpoint" class="layui-input"><span class="col-span">积分</span>
            </div>
        </div>
    </div>
    <div class="layui-form-item" v-show="m.mode==1">
        <label class="layui-form-label">金额限制</label>
        <div class="layui-input-block row">
            <div class="layui-col-md2">
                <input type="checkbox" name="isMinMoney" lay-skin="switch" lay-text="是|否">
            </div>
            <div class="layui-col-md10">
                <div class="layui-form-item">
                    <label class="layui-form-label">最低金额</label>
                    <div class="layui-input-block">
                        <input type="number" name="minMoney" v-model="m.minMoney" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="input-tip">开启后，用户需消费达到最低金额才能使用</div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">生成数量</label>
        <div class="layui-input-block">
            <input type="number" name="amount" v-model="m.amount" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="submit" id="submit"><i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-hide"></i>立即提交</button>
            <button type="button" class="layui-btn layui-btn-primary btn-open-close">取消</button>
        </div>
    </div>
</form>
@section Scripts{
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                m: {
                    mode:1
                },
                group:[]
            }
        });
        layui.config({
            base: '/themes/js/modules/'
        }).use(['layer', 'jquery', 'common', 'form', 'laydate'], function () {
            var form = layui.form, $ = layui.jquery, os = layui.common, laydate = layui.laydate;
            var index = parent.layer.getFrameIndex(window.name);
            laydate.render({
                elem: '#uptime'
                , type: 'datetime'
                , range: true
            });
            form.on('radio(yhtypes)', function (data) {
                vm.m.mode = data.value;
            });
            vm.m.guid = os.getUrlParam('guid');
            var fun = {
                init() {
                    os.load();
                    os.ajax('api/shop/coupon/getmodel', {parm:vm.m.guid}, function (res) {
                        if (res.statusCode === 200) {
                            console.log(res.data);
                            vm.m = res.data.model;
                            vm.group = res.data.list;
                            if (vm.m.beginTime) {
                                $('#uptime').val(vm.m.beginTime + ' - ' + vm.m.endTime);
                            }
                            vm.$nextTick(function () {
                                $("#memberTypes").val(vm.m.memberGradeGuid); 
                                $("#couponTypes").val(vm.m.couponTypes);
                                form.render();
                                os.loadClose();
                            });
                        } else {
                            os.error(res.message);
                            os.loadClose();
                        }
                    });
                }
            }
            fun.init();
            //监听提交
            form.on('submit(submit)', function (data) {
                $('#submit').attr('disabled', true).find('i').removeClass('layui-hide');
                var urls = "api/shop/coupon/add";
                if (vm.m.guid) {
                    urls = "api/shop/coupon/update";
                }
                vm.m.isMinMoney = data.field.isMinMoney === 'on' ? true : false;
                if (data.field.memberTypes != 1) {
                    vm.m.memberTypes = 2;
                    vm.m.memberGradeGuid = data.field.memberTypes;
                } else {
                    vm.m.memberTypes = 1;
                }
                vm.m.couponTypes = data.field.couponTypes;
                if (data.field.uptime) {
                    vm.m.beginTime = data.field.uptime.split(" - ")[0];
                    vm.m.endTime = data.field.uptime.split(" - ")[1];
                }
                os.ajax(urls, vm.m, function (res) {
                    $('#submit').attr('disabled', false).find('i').addClass('layui-hide');
                    if (res.statusCode == 200) {
                        parent.layer.close(index);
                    }
                    else {
                        os.error(res.message);
                    }
                });
                return false;
            });
            $(".btn-open-close").on('click', function () {
                parent.layer.close(index);
            });
        });
    </script>
}